<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue2.5.15.js"></script>
    <style>
        .event-decorate{
            width: 200px;
            height: 300px;
            background-color: cornflowerblue;
        }
        .event-decorate-wrapper{
            width: 100px;
            height: 100px;
            background-color: tomato;
        }
        .event-decorate-wrapper2{
            width: 100px;
            height: 100px;
            background-color: sandybrown;
        }
    </style>
</head>
<body>
<div id="app">
    {{msg}}
    <div class="event-listen">
        <h2>事件监听</h2>
        <input type="button" v-on:click="event1" value="事件1">
        <input type="button" @click="event2(msg)" value="事件2">
        <input type="button" @click="event3" value="事件3">
        <input type="button" @click="event4(msg,$event)" value="事件4">
    </div>
    <div class="event-decorate" @click.once="event2(123)">
        <h2>事件修饰</h2>
        <div class="event-decorate-wrapper" @click="event2(567)">
        </div>
        <div class="event-decorate-wrapper2" @click.stop="event2(4567)">
        </div>

    </div>
    <div class="key-decorate">
        <h2>按键修饰</h2>
        <input type="text" @keyup="event5" v-model="inputText">
        <input type="text" @keyup.control="event5" v-model="inputText">
    </div>
</div>
</body>
<script>

    Vue.config.keyCodes.control = 17;
    const vm = new Vue(
        {
            el:"#app",
            data:{
                msg:"Hello! Vue",
                inputText:""
            },
            methods:{
                event1(){
                    console.log("事件1")
                },
                event2(param){
                    console.log(param)
                },
                event3(event){
                    console.log(event)
                },
                event4(param,event){
                    console.log("事件四"+param)
                    console.log(event)
                },
                event5(){
                    console.log(this.inputText)
                }
            },
            computed:{

            }
        }
    )
</script>
</html>